<template>
	<div class="flex" style="border-left: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; border-right: 1px #eaeaea solid;">

    <div class="zuobian" style="width: 380px; height: calc(100vh - 105px); border-right:1px #eaeaea solid; overflow: auto; position: relative;">
     <div style="height: 50%; overflow: auto; border-bottom: 5px rgb(234, 234, 234) solid; padding: 20px;">

        <el-tree  class="filter-tree" @node-click="handleNodeClick" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
      <div style="position: absolute; left: 0; bottom: 0; background: #fff; width: 100%; height: calc(50% - 10px); overflow: auto;">
        <div>
          <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark"  style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>

            <el-table-column prop="time" label="采样时间"></el-table-column>
            <el-table-column prop="cyl" label="采样值"></el-table-column>
            <el-table-column prop="stationsNo" label="仪器序列号"></el-table-column>
            <el-table-column prop="beizhu" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>


    <div class="youbian" style="padding: 20px; width: calc(100vw - 680px);">
      <div>
        <!-- <el-button type="primary" @click='yunxingzhuansushow'>运行转速设置</el-button> -->

        <el-button type="primary" @click='yunxingzhuansushow2'>误信号范围</el-button>

        <el-button type="primary" @click='yunxingzhuansushow3'>趋势数据转速区间</el-button>

        <el-button type="primary" @click='tianjia'>警戒线</el-button>

      </div>
      <div id="main" style="width: 1000px; height: 500px;"></div>
    </div>


    <el-dialog title="误信号范围" center :visible.sync="yunxingzhuansulog2" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">

      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">时间选择</div>
        <el-date-picker v-model="yunxingzhuansuall2.start" type="datetime" style="width: 250px; margin-left: 30px;" value-format="yyMMddHHmmss" placeholder="选择时间"></el-date-picker>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">时间选择</div>
        <el-date-picker v-model="yunxingzhuansuall2.end" type="datetime" style="width: 250px; margin-left: 30px;" value-format="yyMMddHHmmss" placeholder="选择时间"></el-date-picker>
      </div>
      <div>时间暂无效果</div>

      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">最大值</div>
        <div><el-input v-model="yunxingzhuansuall2.zuida" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">最小值</div>
        <div><el-input v-model="yunxingzhuansuall2.zuixiao" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="shiyuzhibiaolog = false">取消</el-button>
        <el-button type="primary" @click="wuxinhao">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="趋势数据转速区间" center :visible.sync="yunxingzhuansulog3" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <!-- <div v-if="testarr">测试数据共计{{testarr.length}}个点，下面可以剪切</div> -->
      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">起始转速1</div>
          <div><el-input v-model="yunxingzhuansuall.one1" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">终止转速1</div>
          <div><el-input v-model="yunxingzhuansuall.one2" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
      </div>
      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">起始转速2</div>
          <div><el-input v-model="yunxingzhuansuall.one3" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">终止转速2</div>
          <div><el-input v-model="yunxingzhuansuall.one4" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
      </div>
      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">起始转速3</div>
          <div><el-input v-model="yunxingzhuansuall.one5" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">终止转速3</div>
          <div><el-input v-model="yunxingzhuansuall.one6" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
      </div>
      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">起始转速4</div>
          <div><el-input v-model="yunxingzhuansuall.one7" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">终止转速4</div>
          <div><el-input v-model="yunxingzhuansuall.one8" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
      </div>
      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">起始转速5</div>
          <div><el-input v-model="yunxingzhuansuall.one9" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">终止转速5</div>
          <div><el-input v-model="yunxingzhuansuall.one10" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="shiyuzhibiaolog = false">取消</el-button>
        <el-button type="primary" @click="qie">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="时域指标信息" center :visible.sync="yunxingzhuansulog" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">运行转速设置</div>
        <div><el-input v-model="yunxingzhuansuall3.zhuansu" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="shiyuzhibiaolog = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import testarr from '@/common/testarr'
  import * as echarts from 'echarts';
  import { gettree,gettreecedian,gettreeshebei } from '@/api/xitong'
  import { getanalysis,postanalysis } from '@/api/shujuchakan'
	export default {
		name: 'left',
		data() {
			return {
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        yunxingzhuansulog:false,
        yunxingzhuansulog2:false,
        yunxingzhuansulog3:false,
        yunxingzhuansuall:{
          one1:0,
          one2:0,
          one3:0,
          one4:0,
          one5:0,
          one6:0,
          one7:0,
          one8:0,
          one9:0,
          one10:0
        },
        yunxingzhuansuall2:{
          start:"",
          end:"",
          zuida:"",
          zuixiao:""
        },
        yunxingzhuansuall3:{
          zhuansu:0
        },
        tableData:[],

        menuVisible: false,

        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        myChart:"",
        testarr2:[],

        zhexiantushuju:[],

        jingjiexian:false

			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {
      qie:function(){
        let arr1 = []
        let arr2 = []
        let arr3 = []
        let arr4 = []
        let arr5 = []
        if(this.yunxingzhuansuall.one1 && this.yunxingzhuansuall.one2){
          arr1 = this.zhexiantushuju.slice(this.yunxingzhuansuall.one1, this.yunxingzhuansuall.one2)
        }
        if(this.yunxingzhuansuall.one3 && this.yunxingzhuansuall.one4){
          arr2 = this.zhexiantushuju.slice(this.yunxingzhuansuall.one3, this.yunxingzhuansuall.one4)
        }
        if(this.yunxingzhuansuall.one5 && this.yunxingzhuansuall.one6){
          arr3 = this.zhexiantushuju.slice(this.yunxingzhuansuall.one5, this.yunxingzhuansuall.one6)
        }
        if(this.yunxingzhuansuall.one7 && this.yunxingzhuansuall.one8){
          arr4 = this.zhexiantushuju.slice(this.yunxingzhuansuall.one7, this.yunxingzhuansuall.one8)
        }
        if(this.yunxingzhuansuall.one9 && this.yunxingzhuansuall.one10){
          arr5 = this.zhexiantushuju.slice(this.yunxingzhuansuall.one9, this.yunxingzhuansuall.one10)
        }
        this.testarr2 = [...arr1,...arr2,...arr3,...arr4,...arr5]
        this.yunxingzhuansulog = false
        this.shengchengtu()
      },
      wuxinhao:function(){
        // this.testarr2 = testarr.filter(item => item > this.yunxingzhuansuall2.zuixiao)
        this.myChart.clear()
        this.shengchengtu(true)
        this.yunxingzhuansulog2 = false
      },
      yunxingzhuansushow:function(){
        this.yunxingzhuansulog = true
      },
      yunxingzhuansushow2:function(){
        this.yunxingzhuansulog2 = true
      },
      yunxingzhuansushow3:function(){
        this.yunxingzhuansulog3 = true
      },

      //添加警戒线
      tianjia:function(){
        this.myChart.clear()
        this.jingjiexian = !this.jingjiexian
        this.shengchengtu()
      },

      shengchengtu:function(wuxinhao){
        this.option = {
          title: {
            text: '测点图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['测点1']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value',
            // max:this.yunxingzhuansuall2.zuida,
            // min:this.yunxingzhuansuall2.zuixiao
          },
          dataZoom: [
              {
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'none'
              },
              {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'none'
              },
              {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'none'
              },
              {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'none'
              }
          ],
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: this.testarr2
            }
          ]
        };
        if(wuxinhao){
          this.option.yAxis.max = this.yunxingzhuansuall2.zuida
          this.option.yAxis.min = this.yunxingzhuansuall2.zuixiao
        }
        if(this.jingjiexian){
          this.option.series[0].markLine = {
             symbol: ['none','none'], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
             label:{
                 position:"start" //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
             },
             data : [{
                 silent:false, //鼠标悬停事件 true没有，false有
                 lineStyle:{ //警戒线的样式 ，虚实 颜色
                   type:"dotted", //样式  ‘solid’和'dotted'
                   color:"#FA3934",
                   width: 3   //宽度
                },
                 yAxis: 1 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
             }]
          }
        }
        if(this.myChart){
          this.myChart.setOption(this.option);
        }else{
          var chartDom = document.getElementById('main');
          this.myChart = echarts.init(chartDom);
          this.myChart.setOption(this.option);

          var that = this
          chartDom.addEventListener('contextmenu', function(event) {

              event.preventDefault();

              that.menuPosition.x = event.clientX;
              that.menuPosition.y = event.clientY;
              that.menuVisible = true;

              console.log(that.menuVisible)

              document.addEventListener('click', that.closeMenu);
          });
        }
      },

      //选中测点 生成折线图
      handleSelectionChange:function(val){
        //测试
        this.zhexiantushuju = testarr
        this.testarr2 = testarr
        this.shengchengtu()

        //真
        // let data = []
        // val.forEach((item)=>{
        //   let obj = {
        //     "ip": item.ip,
        //     "tongDao": item.tongDao,
        //     "time": item.time,
        //     "tdLx": item.tdLx,
        //     "treeName": item.treeName
        //   }
        //   data.push(obj)
        // })
        // let arr = []
        // postanalysis(data).then(response => {
        //   response.data.forEach(item=>{
        //     console.log(item)
        //     arr = [...arr,...item.points]
        //   })
        //   this.zhexiantushuju = arr
        //   this.testarr2 = arr
        //   this.shengchengtu()
        // })
      },
      // 当节点展开
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      // 当节点折叠
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },

      //点击测点获取日志
      handleNodeClick(data) {
        if(data.type == 21 || data.type == 22 || data.type == 23){
          getanalysis(data.value).then(response => {
            //真
            // this.tableData = response.data

            //测试
            this.tableData = [{time:'2024-5-30',cyl:'7701',stationsNo:'1',beizhu:'测试'}]
          })
        }
      },

      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
      getlist:function(){
        gettreecedian().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">

  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
